<template>
  <div class="input-container">
    <span class="input-lbl">{{inputLbl}}</span>
    <input class="focus-animate" :type="type" ref="input"
           v-bind:value="value" v-on:input="update($event.target.value)"
           autocomplete="false" placeholder="请输入密码" @focus="doFocus" @blur="doFocus"
           :class="{'input-focus':isFocus}" />
    <span class="error-msg">用户名不正确</span>
  </div>
</template>
<style lang="scss">

    .display-n{
      display: none !important;
    }

   .focus-animate{
     transition: all ease-in-out 0.15s;
   }

  .input-container{
    width:400px;
    margin:0px auto;
    height:auto;
    clear: both;
    input{
      outline: none;
      background: transparent;
      border: 1px solid #ccc;
      width:400px;
      height: 38px;
      padding: 0px 15px;
      &.input-focus{
        -webkit-box-shadow: inset 0 0 5px #98eadd;
        border-color:#98eadd;
      }
    }
    .input-lbl{
      width:100%;
      display: inline-block;
      font-size: 18px;
      color: #acacac;
      height:40px;
      line-height: 40px;

    }
    .error-msg{
      width:400px;
      line-height: 30px;
      height:30px;
      color: red;
      font-family: '微软雅黑';
    }

  }

</style>
<script>
  export default {
    name: 'InputBox',
    props: {
      inputLbl: {
        type: String,
        required: true,
        default: '未设置'
      },
      type: {
        type: String,
        required: true,
        default: 'text'
      },
      value: {
        type: String,
        required: true,
        default: ''
      }
    },
    data () {
      return {
        isFocus: false
      }
    },
    mounted () {
      /**
       * 注册事件
       */
      this.$on('message', (value) => {
        console.log(value)
      })
    },
    methods: {
      update (value) {
        this.$refs.input.value = value
        this.$emit('input', value)
      },
      doFocus () {
        this.isFocus = !this.isFocus
      }
    }
  }
</script>
